<template>
    <div class="areaPanel">
        <vue-scroll>
            <div class="areaBox">
                <textarea ref="textArea" class="textArea" placeholder="请输入内容" v-model="value"></textarea>
            </div>
        </vue-scroll>
    </div>
</template>

<script>
    export default {
        name: "dcimTextArea",
        data() {
            return {

                value: ''

            }
        },
        props: {
            content: String,
            limit: {
                default: function(){
                    return null
                }
            }
        },
        watch: {
            content: function (val) {

                this.value = val

                this.$refs.textArea.style.height = 'auto'

            },
            value: function (val) {

                // let result = ''
                //
                // if (this.limit && val.length > parseInt(this.limit)) {
                //
                //     result = val.substring(0, 20)
                //
                // } else {
                //
                //     result = val
                //
                // }
                //
                // this.value = result

                this.$emit('value', val)
            }
        },
        updated() {

            const self = this.$refs.textArea

            self.style.height = self.scrollHeight + 'px'

        },
        created() {

            this.value = this.content

        }
    }
</script>

<style scoped lang="stylus">
    .areaPanel
        display: inline-block
        min-width: 282px
        border: 1px solid #284689
    .areaBox
        max-height: 128px
    .textArea
        width: 100%
        height: 100%
        border: none
        overflow: hidden

</style>
